<template>
	<view class="body">
		<view class="back">
			<image src="/static/aidex/login/login-bg2.png"></image>
		</view>
		<view class="user">
			<!-- <view class="set" @click="handleEdit">
				<u-icon name="setting" color="#3073ff" size="44"></u-icon>
			</view> -->
			<view class="head">
				<image :src="info.avatar"></image>
			</view>
			<view class="msg">
				<view class="nickname">
					<text>{{info.nickname}}</text>
					<!-- woman  e6347e -->
					<u-icon v-if="info.gender" name="man" color="#3073ff" size="32"></u-icon>
				</view>
				<view class="day">
					<u-icon name="bag-fill" color="#5476de" size="32"></u-icon>
					<text>已加入{{info.join_days}}天</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="ul">
				<view class="li">
					<view class="num">1</view>
					<view class="text">关注</view>
				</view>
				<view class="li">
					<view class="num">1</view>
					<view class="text">粉丝</view>
				</view>
				<view class="li">
					<view class="num">1</view>
					<view class="text">信用分</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="top">
					<view class="left">他的交易</view>
					<view class="right">在顺带网赚了10000元</view>
				</view>
				<view class="bottom">
					<view class="item" @click="handleClick(1)">
						<view class="icon">
							<u-icon name="bag" color="#5476de" size="80"></u-icon>
							<view class="num">2</view>
						</view>
						<text>他发布的</text>
					</view>
					<view class="item" @click="handleClick(2)">
						<view class="icon">
							<u-icon name="red-packet" color="#5476de" size="80"></u-icon>
							<view class="num">2</view>
						</view>
						<text>他完成的</text>
					</view>
					<view class="item" @click="handleClick(3)">
						<view class="icon">
							<u-icon name="chat" color="#5476de" size="80"></u-icon>
							<view class="num">2</view>
						</view>
						<text>信用及评价</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				info: {},
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$Api.getUserInfo(this.userInfo.rid).then(res => {
					// console.log('获取用户信息', res)
					this.info = res.result
				}, err => {
					console.log(err)
				})
			},
			//公共点击事件
			handleClick(type) {
				let url = ""
				if (type == 1) {
					url = "/pages/user/publish"
				} else if (type == 2) {
					url = "/pages/user/finish"
				} else if (type == 3) {
					url = "/pages/user/evaluate"
				}
				uni.navigateTo({
					url:url
				})
			},
			//编辑用户信息
			handleEdit() {
				uni.navigateTo({
					url: "/pages/user/editUser?info=" + JSON.stringify(this.info)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.back {
			width: 100%;
			height: 35%;
			display: flex;
			justify-content: center;
			// position: fixed;
			// left: 0;
			// top: 0;
			// z-index: 9;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user {
			width: 100%;
			height: 70%;
			background: #fff;
			border-radius: 40upx 40upx 0 0;
			padding: 80upx 0;
			position: relative;
			// bottom: 0;
			// top: 35%;
			// z-index: 99;

			.set {
				position: absolute;
				top: 30upx;
				right: 30upx;
				z-index: 999;
			}

			.head {
				width: 200upx;
				height: 200upx;
				border: 10upx solid #e5e5e5;
				margin: 0 auto;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.msg {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 40upx auto;

				.nickname {
					width: max-content;
					background: #FFB200;
					color: #fff;
					font-size: 30upx;
					border-radius: 60upx;
					padding: 10upx 30upx;
					display: flex;
					align-items: center;
					justify-content: center;

					/deep/ .u-icon--right {
						margin-left: 20upx;
					}
				}

				.day {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 40upx;

					text {
						margin-left: 5upx;
						color: #414141;
					}
				}
			}

			.line {
				width: 100%;
				height: 20upx;
				background: #f5f5f5;
			}

			.ul {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30upx 0;

				.li {
					width: 33.33%;
					text-align: center;

					.num {
						font-size: 32upx;
						color: #999;
					}

					.text {
						margin-top: 10upx;
						color: #414141;
					}

					&:last-child {
						.num {
							color: #5476de;
						}
					}
				}
			}

			.card {
				padding: 30upx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2upx solid #e5e5e5;
					padding-bottom: 20upx;

					.left {
						font-size: 36upx;
						color: #414141;
					}

					.right {
						font-size: 28upx;
						color: #999;
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 40upx;

					.item {
						width: 33.33%;
						text-align: center;
						display: flex;
						flex-flow: column;
						justify-content: center;
						align-items: center;

						.icon {
							position: relative;

							.num {
								position: absolute;
								top: -12upx;
								right: -20upx;
								width: 40upx;
								height: 40upx;
								border-radius: 50%;
								color: #fff;
								background: #ff0000;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						text {
							margin-top: 20upx;
							color: #414141;
						}
					}
				}
			}
		}
	}
</style>